{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    body {
        background-color: #F2F2F2;
    }

    .xm-body {
        height: 400px !important;
        overflow-y: scroll !important;
    }

    .layui-form-selected dl {
        height: 200px !important;
        overflow-y: scroll !important;
    }
</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="padding: 20px">
                <br><br>
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <input type="hidden" id="id" name="id" value="{$data.id? $data.id : 0}"/>
                    <!--<div class="layui-form-item ">-->
                        <!--<label class="layui-form-label">上级模块</label>-->
                        <!--<div class="layui-input-block" lay-verify='cate_id'>-->
                            <!--<div id="demo1"  class="xm-select-demo" ></div>-->
                           <!---->
                        <!--</div>-->
                    <!--</div>-->
                    <input name="pid" id="cate_id" type="hidden" value="0">



                    <div class="layui-form-item">
                        <label class="layui-form-label">权限分类</label>
                        <div class="layui-input-block">
                            {if !empty($data.type)}
                            <input type="radio" name="type"  value="system" lay-filter="beshared" title="系统"   {$data.type=='system' ? 'checked':'' } >
                            <input type="radio" name="type"  value="plugin" lay-filter="beshared" title="插件"  {$data.type=='plugin' ?  'checked':'' }>
                            <input type="radio" name="type"  value="app"    lay-filter="beshared" title="应用"  {$data.type=='app' ?  'checked':'' }>
                            {else/}
                            <input type="radio" name="type"  value="system"  lay-filter="beshared"  title="系统" checked >
                            <input type="radio" name="type"  value="plugin"  lay-filter="beshared"  title="插件">
                            <input type="radio" name="type"  value="app"     lay-filter="beshared"  title="应用">
                            {/if}
                        </div>
                    </div>
                    <div class="layui-form-item" id="miniapp" {if empty($data.type)||$data.type!='app' } style="display: none" {/if}>
                    <label class="layui-form-label">应用</label>
                    <div class="layui-input-block">

                        <select name="miniapp_name" id="miniapp_name" lay-filter="miniapp_name" >
                            <option value="">请选择</option>
                            {if !empty($data.app_name)}
                            {volist name="miniapp" id="vo" key="k"}
                            <option value="{$vo.dir}" {eq name="vo.dir" value="$data.app_name"} selected=""  {/eq}>{$vo.title}</option>
                            {/volist}
                            {else/}
                            {volist name="miniapp" id="vo"  key="k"}
                            <option value="{$vo.dir}" >{$vo.title}</option>
                            {/volist}
                            {/if}
                        </select>

                    </div>
            </div>

            <div class="layui-form-item" id="plugin" {if empty($data.type)||$data.type!='plugin' } style="display: none" {/if}>
            <label class="layui-form-label">插件</label>
            <div class="layui-input-block">

                <select name="plugin_name" id="plugin_name"   lay-filter="plugin_name"  >
                    <option value=""  >请选择</option>
                    {if !empty($data.app_name)}
                    {volist name="plugin" id="vo" key="k"}
                    <option value="{$vo.name}" {eq name="vo.name" value="$data.app_name"} selected=""  {/eq}>{$vo.title}</option>
                    {/volist}
                    {else/}
                    {volist name="plugin" id="vo" key="k" }
                    <option value="{$vo.name}"    >{$vo.title}</option>
                    {/volist}
                    {/if}
                </select>

            </div>
        </div>


        <input type="hidden" name="app_name" id="app_name"  value="{$data.app_name?$data.app_name:'manage'}">



        <!--分类id-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">拥有权限</label>
                        <div class="layui-input-block" lay-verify='auth'>
                            <div id="auth"  class="xm-select-demo" style="margin: 0 5px 0 0 ;"></div>
                            <input name="rule_ids" id="auth_id" type="hidden" >
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">模块名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" placeholder="应用/功能/模块名" autocomplete="off" class="layui-input" value="{$data.name?$data.name:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">唯一标识</label>
                        <div class="layui-input-block">
                            <input type="text" name="group_name" lay-verify="required" placeholder="英文唯一标识 全小写 多值“_”隔开" autocomplete="off"   onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" class="layui-input" value="{$data.group_name?$data.group_name:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            {if isset($data.status)}
                            <input type="radio" name="status"  value="0"  title="失效"   {$data.status==0 ? 'checked':'' } >
                            <input type="radio" name="status"  value="1"  title="有效"  {$data.status==1 ?  'checked':'' }>
                            {else/}
                            <input type="radio" name="status"  value="0"  title="失效"  >
                            <input type="radio" name="status"  value="1"  title="有效" checked>
                            {/if}
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即提交</button>
                        </div>
                    </div>
                </form>
                <br><br>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate,manage,xmSelect,eleTree;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate', 'manage', 'xmSelect','eleTree'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;
        manage = layui.manage;
        xmSelect = layui.xmSelect;
        eleTree = layui.eleTree;

        //添加时间 日期时间选择器
        laydate.render({
            elem: '#add_time'
            ,type: 'datetime'
        });


        var uploadInst = bw_upload(upload, 'pic');//图标上传

//分类下拉单选---------------------------------------------------  start
//
        var cate_id = '{$pid? $pid : 0}';
//         bwajax.post("{:Url('getRoleModelTree')}", {
//             checked_ids: cate_id,
//             disabled: '0'
//         }).then(function (response) {
//             var top_data = {
//                 id:0,
//                 pid:0,
//                 label:'顶级节点',
//                 checked :false
//             };
//             if(cate_id=='0'){
//                 top_data.checked =true;
//             }
//             response.data.unshift(top_data);
//             console.log(response.data);
//             //先渲染多选
//             var demo1 = xmSelect.render({
//                 el: '#demo1',
//                 theme: {
//                     color: '#5FB878',
//                 },
//                 content: '<div id="ele1" lay-filter="ele1"></div>',
//             })
//
//
// //渲染自定义内容
//             var ele = layui.eleTree.render({
//                 elem: '#ele1',
//                 data: response.data,
//                 showCheckbox: true, //展示复选框
//                 highlightCurrent: true, //选中高亮
//                 defaultExpandAll: false,//默认全部展开
//                 checkStrictly:true , //严格按照父子不关联
//                 renderAfterExpand:false //未展开也渲染子节点数据
//             });
//
//
//
// //初始化数据---------------------------------------------end
//
//
//             //初始化选中数据需要后台的树菜单传入checked : true属性
//             var arr = ele.getChecked(false, false);
//
//             console.log(arr);
//             var value = new Array();
//             for (i = 0; i < arr.length; i++) {
//                 value.push(arr[i].id);
//             }
//             demo1.update({
//                 prop: {
//                     name: 'label',
//                     value: 'id',
//                 },
//                 initValue: value,
//                 data: arr,
//             }).setValue(arr)
//             $('#cate_id').val(value.toString());
//
//             //初始化数据---------------------------------------------end
//
//
//
// //监听下拉多选的选择
//             demo1.update({
//                 on({arr, change, isAdd}) {
//                     if (isAdd === false) {
//                         //监听取消
//                         ele.setChecked(arr.map(item => item.id), true);
//                         var value = 0;
//                         for (i = 0; i < arr.length; i++) {
//                             value=arr[i].id;
//                         }
//                         $('#cate_id').val(value.toString());
//                         cate_id =value.toString();
//                         getNodeIds(cate_id);
//                     }
//                 },
//             });
// //监听树的选择
//             layui.eleTree.on("nodeChecked(ele1)", function (d) {
//
//
//
//                 var arr = ele.getChecked(false, false)
//                 console.log(arr);
//                 var arr1 = arr.pop();
//                 var value = arr1;
//                 ele.setChecked([], true);
//                 console.log(value);
//                 if(value){
//                     $('#cate_id').val(value.id);
//                     cate_id =value.id;
//                 }else{
//                     $('#cate_id').val('0');
//                     cate_id ='0';
//                 }
//                 getNodeIds(cate_id);
//                 demo1.update({
//                     prop: {
//                         name: 'label',
//                         value: 'id',
//                     },
//                     data: [arr1],
//                 }).setValue([arr1])
//                 $(".xm-body").addClass("dis");
//
//             })
//
//         });


//权限下拉多选---------------------------------------------------  start
        getNodeIds(cate_id,"{$data.type? $data.type : 'system'}","{$data.app_name? $data.app_name : 'manage'}")

//权限下拉多选---------------------------------------------------  end

        //单选监听
        form.on('radio(beshared)', function (data) {
            // alert(data.value);

            switch(data.value)
            {
                case 'plugin':
                    $("#miniapp").hide();
                    $("#plugin").show();
                    getNodeIds(0,'plugin','');
                    break;
                case 'app':
                    $("#miniapp").show();
                    $("#plugin").hide();
                    getNodeIds(0,'app','');
                    break;
                default:
                    $("#miniapp").hide();
                    $("#plugin").hide();
                    $('#app_name').val('manage');
                    getNodeIds(0,'system','manage');
            }
            $("#miniapp_name").val('');
            $("#plugin_name").val('');
            form.render("select");
            // form.render();
        })
        //下拉监听应用
        form.on('select(miniapp_name)', function(data){
            getNodeIds(0,'app',data.value);
            // 监听事件
            $('#app_name').val(data.value);
        });
        //下拉监听插件
        form.on('select(plugin_name)', function(data){
            getNodeIds(0,'plugin',data.value);
            // 监听事件
            $('#app_name').val(data.value);
        });



        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;

            if(!data.pid) {layer.msg('请选择父级不能为空', {icon: 2});return false}
            if(!data.status) {layer.msg('是否有效不能为空', {icon: 2});return false}
            if(!data.name) {layer.msg('用户组名不能为空', {icon: 2});return false}
            if(!data.group_name) {layer.msg('唯一标识不能为空', {icon: 2});return false}
            if(data.type) {
                switch(data.type)
                {
                    case 'plugin':
                        if(!data.plugin_name) {layer.msg('插件名不能为空', {icon: 2});return false}
                        break;
                    case 'app':
                        if(!data.miniapp_name) {layer.msg('应用名不能为空', {icon: 2});return false}
                        break;
                }

            }


            delete data['eleTree-node'];
            delete data.select;
            var post_url = "{:Url('addModel')}";
            if(data['id']!=0){
                post_url = "{:Url('editModel')}";

            }
            //console.log(data);return false;
            //ajax调用后台接口
            bwajax.post(post_url, data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();

                    } else {
                        layer.msg(response.data.msg, {icon: 2});

                    }
                })

            return false;
        })
    });


    function submitSuccess() {
        parent.location.reload();//这里调用的是父页面的reload方法
        setTimeout(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }, 1000);
    }

    // //粉丝
    // function getNum(){
    //
    //     layer.open({
    //         type: 2,
    //         title: '图标列表',
    //         shade: 0.8,
    //         //closeBtn: 0, //不显示关闭按钮
    //         shade: [0],
    //         shadeClose: true,//单机空白处消失
    //         maxmin: true,
    //         //anim: 4, //动画类型
    //         area: ['40%','90%'],
    //         content:"{:Url('public_common/icon')}",
    //         btn: ['选择图标'],
    //         yes: function(index, layero){
    //
    //             var nodeName = window["layui-layer-iframe" + index];//父页面引用
    //             var icon = nodeName.getIcon();
    //             if(icon!=false){
    //                 $('#icon').val(icon);
    //                 layer.close(index);
    //                 //处理重复提交
    //             }
    //
    //
    //
    //
    //
    //         }
    //     });
    // }


    function getNodeIds(cate_id,type,app_name) {
        bwajax.post("/manage/node/getMemberNodeTree", {
            checked_ids: '{$data.rule_ids? $data.rule_ids : 0}'
            ,pid:cate_id
            ,type:type
            ,app_name:app_name
            ,disabled: '0',
            is_child:'true'
        }).then(function (response) {
            console.log(response.data);
            //先渲染多选
            var auth = xmSelect.render({
                el: '#auth',
                theme: {
                    color: '#5FB878',
                },
                content: '<div id="ele2" lay-filter="ele2"></div>',
            })


//渲染自定义内容
            var ele = layui.eleTree.render({
                elem: '#ele2',
                data: response.data,
                showCheckbox: true,
                defaultExpandAll: false,
                checkStrictly:false , //严格按照父子不关联
                renderAfterExpand:false //未展开也渲染子节点数据
            });


//初始化数据---------------------------------------------end


            //初始化选中数据需要后台的树菜单传入checked : true属性
            var arr = ele.getChecked(false, true);
            var value = new Array();
            console.log(arr);
            if(arr){
                for (i = 0; i < arr.length; i++) {
                    value.push(arr[i].id);
                }
            }

            auth.update({
                prop: {
                    name: 'label',
                    value: 'id',
                },
                initValue: value,
                data: arr,
            }).setValue(arr)
            $('#auth_id').val(value.toString());

            //初始化数据---------------------------------------------end

//监听下拉多选的选择
            auth.update({
                on({arr, change, isAdd}) {
                    if (isAdd === false) {
                        //监听取消
                        ele.setChecked(arr.map(item => item.id), true);
                        var value = new Array();
                        for (i = 0; i < arr.length; i++) {
                            value.push(arr[i].id);
                        }
                        $('#auth_id').val(value.toString());
                    }
                },
            });
//监听树的选择
            layui.eleTree.on("nodeChecked(ele2)", function (d) {
                var arr = ele.getChecked(false, true)
                console.log(arr)
                var value = new Array();
                for (i = 0; i < arr.length; i++) {
                    value.push(arr[i].id);
                }
                $('#auth_id').val(value.toString());
                auth.update({
                    prop: {
                        name: 'label',
                        value: 'id',
                    },
                    data: arr,
                }).setValue(arr)

            })

        });


    }
</script>
{/block}